CSS

none и inherit

Я уже не раз говорил, что я не договариваю о некоторых значениях CSS свойств, и как правило, не договариваю я о двух. Эти два значения есть у большинства CSS свойств, за редким исключением они у некоторых не работают, но по сути есть везде. Это "none" и "inherit". Теперь давайте разберемся по очереди как они работают.

"None" отменяет значение которое мы уже задали. Допустим у нас есть "box", где задается "background".

.box{
  background: tomato;
}

Дальше, мы пишем следующее:

.box{
  background: tomato;
}

.box{
  background: none;
}

В этом случае "background" отменяется и задаваться не будет.

Таким образом мы можем сбрасывать какие-то значения свойств.

С "inherit" немножечко сложнее. В этом случае, значение берется у родителя этого блока.

Давай немножко усложним текущую ситуацию.

<div class="box_1">
  <div class="box_2">
    Текст
  </div>
</div>

Для "box_2" мы создадим размер шрифта 20 пиксель.

.box_2{
  font-size: 20px;
}

У нас на странице появится текст размером 20 пикселей.

Ну что будет если мы зададим значение "inherit"?

.box_2{
  font-size: inherit;
}

Тогда текст станет размером 16 пикселей. Почему? Потому что мы для этого бокса берем значение родительского бокса. В данном случае это "box_1" у него значение не задано, у него шрифт (стандарт) 16 пикселей.

А если мы для "box_1" зададим какой-то размер шрифта допустим 30 пикселей.

.box_1{
  font-size: 30px;
}

.box_2{
  font-size: inherit;
}

Текст станет размером 30 пикселей, а значит значение font-size для box_2 назначается от box_1.

То есть с помощью "inherit" мы можем сбрасывать значение. Но это только в том случае, если у родителя не задано css-свойство, которое мы хотим сбросить.